import React, { useState, useEffect,useRef } from 'react';
import bg from '../../assets/bg.jpg'
import right from '../../assets/right.png'
import left from '../../assets/left.png'
import Header from '../../conponents/header';
import Footter from '../../conponents/footter'
import { useLocation } from 'react-router-dom';
import Service from '../../conponents/service';
import { Image } from 'antd'
import axios from 'axios'
import Login from '../../conponents/login';
import { useTranslation } from 'react-i18next';
import { BASE_URL } from '../../utils/request';


const Detail = () => {
  const { t } = useTranslation()

  const location = useLocation();
  const { id, type } = location.state
  const [currentIndex, setCurrentIndex] = useState(0);
  const [item, setItem] = useState({})
  const token = localStorage.getItem('token') || ''
  const [showLogin, setShowLogin] = useState(false);
  const onCloseLogin = (e) => {
    setShowLogin(e)
  }


  const getInfo = async () => {
    const url = type === 'OD' ? '/system/od/' + id : '/system/sm/' + id
    const res = await axios({
      url: BASE_URL + url,
      method: 'get',   // 默认值
      headers: {
        Authorization: token
      }
    })
    if (res.data.code === 200) {
      setItem(res.data.data)
    }
    if (res.data.code === 401) {
      setShowLogin(true)
    }
  }
  useEffect(() => {
    getInfo()
  }, [id])

  const showMedia = (index) => {
    setCurrentIndex(index);
  };

  const nextSlide = () => {
    setCurrentIndex((currentIndex + 1) % (item.photoFiles.length + 1));
    scrollContainerRef.current.scrollLeft +=30;

  };

  const prevSlide = () => {
    setCurrentIndex((currentIndex - 1 + item.photoFiles.length + 1) % (item.photoFiles.length + 1));
    scrollContainerRef.current.scrollLeft -=30;
  };
  const scrollContainerRef = useRef(null);

  return (
    <>
      <div style={{ backgroundImage: `url(${bg})` }} className='h-auto bg-no-repeat bg-cover pt-10 pb-32'>
        <Header />
      </div>
      <div className="bg-[#E3F2DF] font-sans p-5">
        <div className="max-w-5xl mx-auto bg-white p-5 rounded-lg shadow-md flex flex-wrap">
          <div className="sm:w-64 w-full text-center bg-gray-200 rounded-lg p-2 sm:mr-5 flex flex-col justify-between">
            {item?.photoFiles?.length > 0 && <div className='relative h-[45%]'>
              <Image.PreviewGroup items={item.photoFiles.map((i, index) =>i.url)}
                preview={{
                  onChange: (current, prev) => {
                    current>currentIndex?scrollContainerRef.current.scrollLeft +=30:scrollContainerRef.current.scrollLeft -=30
                    setCurrentIndex(current)
                  }
                }}
              > 
                <Image src={item.photoFiles[currentIndex]?.url} alt="" height="350px" width="100%" className='object-cover' />
              </Image.PreviewGroup>
              <div className="absolute top-1/2 left-0 w-full flex justify-between transform translate-y-1/2">
                {currentIndex > 0 ?
                  <img src={left} className="bg-black bg-opacity-50 text-white p-2 cursor-pointer rounded-full w-10 ml-1" onClick={prevSlide} />
                  : <div></div>}
                {currentIndex < item.photoFiles.length - 1 &&
                  <img src={right} className="bg-black bg-opacity-50 text-white p-2 cursor-pointer rounded-full w-10 mr-1" onClick={nextSlide} />}
              </div>
              <div ref={scrollContainerRef} className="flex mt-2 sm:w-60 w-full overflow-x-auto overflow-y-hidden">
                {item.photoFiles.map((i, index) => (
                  <img
                    key={index}
                    src={i.url}
                    className={`${currentIndex === index ? 'border-blue-500 border-2' : ''} w-10 h-10 object-cover mx-1 rounded-md cursor-pointer transition-transform transform hover:scale-110`}
                    onClick={() => showMedia(index)}
                  />
                ))}
              </div>
            </div>}
            {item?.videoFiles?.length > 0 && <video className={currentIndex === item.videoFiles.length ? 'block w-full h-auto rounded-lg' : 'hidiven'} style={{ height: '48%', backgroundColor: '#000' }} controls>
              <source src={item.videoFiles[0]?.url} type="video/mp4" />
            </video>}
          </div>

          <div className="flex-1 flex flex-col justify-center">
            {/* OD页面 */}
            <h2 className="text-2xl text-gray-800 mb-2 border-b-2 border-[#E3F2DF] pb-1">{type}{t('详情')}</h2>
            {type === 'OD' && <div>
              <div className="mb-5">
                <div className="flex items-center">
                  <div>👤 {t('姓名')}：</div>
                  <div>{item.name}</div>
                </div>
                <div className="flex items-center">
                  <div>👤 {t('出生日期')}：</div>
                  <div>{item.birth}</div>
                </div>
                <div className="flex items-center">
                  <div>👤 {t('所在地')}：</div>
                  <div>{item.location}</div>
                </div>
                <div className="flex items-center">
                  <div>🩸 {t('血型')}：</div>
                  <div>{item.blood}</div>
                </div>
                <div className="flex items-center">
                  <div>🩸 {t('种族')}：</div>
                  <div>{item.race}</div>
                </div>
                <div className="flex items-center">
                  <div>📏 {t('身高')}：</div>
                  <div>{item.height}</div>
                </div>
                <div className="flex items-center">
                  <div>⚖️ {t('体重')}：</div>
                  <div>{item.weight}</div>
                </div>
                <div className="flex items-center">
                  <div>⚖️ {t('眼睛颜色')}：</div>
                  <div>{item.eyeColor}</div>
                </div>
                <div className="flex items-center">
                  <div>⚖️ {t('肤色')}：</div>
                  <div>{item.skinColor}</div>
                </div>
                <div className="flex items-center">
                  <div>⚖️ {t('发色')}：</div>
                  <div>{item.hairColor}</div>
                </div>
                <div className="flex items-center">
                  <div>⚖️ {t('母语')}：</div>
                  <div>{item.firstLanguage}</div>
                </div>
                {token && <div className="flex items-center">
                  <div>🪙 {t('价格')}：$</div>
                  <div>{item.price}</div>
                </div>}
                <div className="flex items-center">
                  <div>💍 {t('是否婚姻')}：</div>
                  <div>{item.maritalStatus === false ? `${t('未婚')}` : `${t('已婚')}`}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('是否整过')}：</div>
                  <div>{item.plastic == '0' ? '否' : item.plastic == '1' ? `${t('是')}` : ''}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('最高学历')}：</div>
                  <div>{item.education}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('大学名称')}：</div>
                  <div>{item.school}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('专业科系')}：</div>
                  <div>{item.speciality}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('母语外您还会哪种语言')}：</div>
                  <div>{item.secondLanguage}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('第二语言是否可以说的流利')}：</div>
                  <div>{item.fluentLanguage}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('职业')}：</div>
                  <div>{item.occupation}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('性格')}：</div>
                  <div>{item.personality}</div>
                </div>
                <div className="flex items-center">
                  <div>💍 {t('爱好和兴趣才能')}：</div>
                  <div>{item.otherExpertise}</div>
                </div>
                <div className="flex items-center">
                  <div>🩸 {t('月经一般持续几天')}：</div>
                  <div>{item.menstrualTime}</div>
                </div>
                <div className="flex items-center">
                  <div>🩸 {t('最后一次月经 ')}：</div>
                  <div>{item.lastMenstrual}</div>
                </div>
                <div className="flex items-center">
                  <div>👶 {t('运动习惯')}：</div>
                  <div>{item.exerciseHabit}</div>
                </div>
              </div>
              <div>
                <h2 className="text-2xl text-gray-800 mb-2 border-b-2 border-[#E3F2DF] pb-1">{t('联系方式')}</h2>
                <div className="flex items-center mb-2">
                  <div>📞 {t('联系电话')}：</div>
                  <div className="ml-1">{item.contactPhone}</div>
                </div>
                <div className="flex items-center mb-2">
                  <div>⚠️ {t('紧急联系人电话')}：</div>
                  <div className="ml-1">{item.emContactPhone}</div>
                </div>
                <div className="flex items-center">
                  <div>💬 {t('三方聊天软件')}：</div>
                  <div className="ml-1">{item.chatSoftware}</div>
                </div>
                <div className="flex items-center mb-2">
                  <div>🏠 {t('家庭住址')}：</div>
                  <div className="ml-1">{item.address}</div>
                </div>
              </div>
            </div>}
            {/* SM页面 */}
            {type === 'SD' && <div>
              <div className="mb-5">
                <div className="flex items-center">
                  <div>👤 {t('姓名')}：</div>
                  <div>{item.name}</div>
                </div>
                <div className="flex items-center">
                  <div>📏 {t('年龄')}：</div>
                  <div>{item.age}</div>
                </div>
                <div className="flex items-center">
                  <div>📏 {t('身高')}：</div>
                  <div>{item.height}</div>
                </div>
                <div className="flex items-center">
                  <div>⚖️ {t('体重')}：</div>
                  <div>{item.weight}</div>
                </div>
                <div className="flex items-center">
                  <div>🩸 {t('血型')}：</div>
                  <div>{item.blood}</div>
                </div>
                {token && <div className="flex items-center">
                  <div>🪙 {t('价格')}：$</div>
                  <div>{item.price}</div>
                </div>}
              </div>
              <div>
                <h2 className="text-2xl text-gray-800 mb-2 border-b-2 border-[#E3F2DF] pb-1">{t('联系方式')}</h2>
                <div className="flex items-center">
                  <div>📞 {t('联系电话')}：</div>
                  <div>{item.contactPhone}</div>
                </div>
                <div className="flex items-center">
                  <div>⚠️ {t('紧急联系人电话')}：</div>
                  <div>{item.emContactPhone}</div>
                </div>
                <div className="flex items-center">
                  <div>💬 {t('三方聊天软件')}：</div>
                  <div>{item.chatSoftware}</div>
                </div>
                <div className="flex items-center">
                  <div>🏠 {t('家庭住址')}：</div>
                  <div>{item.address}</div>
                </div>
              </div>
            </div>}
          </div>
        </div>
      </div>
      <Footter />
      <Service />
      <Login show={showLogin} onEvent={onCloseLogin} />
    </>
  );
};

export default Detail;
